<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>攀枝花智慧旅游后台系统</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="user/css/mycss.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="userIndex :: header">

    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                </i>
                <li class="layui-nav-item layui-nav-itemed"><a href="index.html">欢迎首页</a></li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="#">用户中心</a>
                    <dl class="layui-nav-child">
                        <dd><a href="center.html">中心面板</a></dd>
                        <dd class="layui-this"><a href="fundamental.html">基本资料</a></dd>
                        <dd><a href="javascript:;">身份信息</a></dd>
                        <dd><a href="javascript:;">修改密码</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">产品购买</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">特产购买</a></dd>
                        <dd><a href="javascript:;">酒店预订</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">贴子管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">发帖目录</a></dd>
                        <dd><a href="javascript:;">消息通知</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!--//中间区域部分-->
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">我的资料</li>
                <li>头像</li>
                <li>密码</li>
                <li>账号绑定</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机</label>
                            <div class="layui-input-inline">
                                <input id="telNum" type="text" name="tel" lay-verify="required" placeholder="请输入手机号"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <br>
                            <span style="color: red;" class="mySpan" id="telNumTag">您填入正确的手机号才可进行社区发帖/回帖等操作</span>
                        </div>



                        <div class="layui-form-item">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-inline">
                                <input type="text" id="email" name="email" lay-verify="required" placeholder="请输入手机验证码"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <br>
                            <span style="color: red;"  class="mySpan" id="emailTag">您必须填写正确的邮箱，否则无法进行相关操作</span>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="nickName" lay-verify="required" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item" pane="">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block" id="sex">
                                <input class="radioMan" type="radio" name="sex" value="男" title="男" checked>
                                <input class="radioWoman" type="radio" name="sex" value="女" title="女">
                                <input class="" type="radio" name="sex" value="未选择" checked title="未选择" disabled>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">城市</label>
                            <div class="layui-input-inline">
                                <input type="text" id="city" lay-verify="required" placeholder="攀枝花" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <textarea id="autograph" placeholder="随便说些什么记录现在的心情！" class="layui-textarea"></textarea>
                            </div>
                        </div>
                    </form>

                    <button type="button" class="layui-btn">提交修改</button>

                </div>
                <div class="layui-tab-item">
                    <div class="upImageDiv">
                        <div class="layui-upload myGrid-demo ">
                            <button type="button" class="layui-btn" id="upImage">上传图片</button>
                            <p class="mySpan myP">建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="upImageImag" style="width: 390px;height: 328px">
                                <p id="demoText"></p>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">旧密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" placeholder="请输入旧密码" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">新密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="password" placeholder="请输入新密码" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
                    </div>
                    <button type="button" class="layui-btn">提交修改</button>

                </div>
                <div class="layui-tab-item"><p>暂未开放</p></div>
            </div>
        </div>
        <input type="hidden" id="parameterBind" th:value="${userInfo}"/>
        <input type="hidden" id="itemId">
        <button type='hidden' id='updateImag'/>
    </div>
</div>
<script src="layui/layui.js"></script>
<script src="js/jquery.js"></script>
<script src="js/userAttr.js"></script>

    <script>

        $(function () {
            initLayui();
            fundamentalSetBythisPage();
        });

        function  fundamentalSetBythisPage() {
            //调用公共模块
            fundamentalSet();
            //回显基础信息页；
            userInfoDisPaly();
            //回显头像并绑定上传的按钮；
            BindUpImageBtn();
        }

        function BindUpImageBtn() {
            $("#upImageImag")[0].src = userInfoObject.headImg == null ? commonHeadImg : userInfoObject.headImg;
            //
            layui.use('upload', function(){
                var upload = layui.upload;
                //执行实例
                var uploadInst = upload.render({
                    elem: '#upImage' //绑定元素
                    ,url: '/user/admin/upload/head/image' //上传接口
                    ,accept:'images'
                    ,data:{
                        id:function () {
                            return userInfoObject.id;
                        }
                    }
                    ,done: function(res){
                        layer.msg(res.message);
                        //上传完毕回调
                        if (res.result == "SUCCESS") {
                             var imageUrl = res.data;
                            $("#upImageImag")[0].src = imageUrl;
                            $("#iconImage")[0].src = imageUrl;
                        }
                    }
                    ,error: function(){
                        //请求异常回调
                        layer.msg("上传出现异常，请联系管理员！");
                    }
                });
            });
        }

        function userInfoDisPaly() {
            $("#telNum").blur(function(){
                var pNum = $(this).val();
                if (pNum.length > 0 && isPhoneNumber(pNum)){
                    $("#telNumTag").hide(300);
                } else {
                    $("#telNumTag").show(300);
                }
            })

            $("#email").blur(function(){
                var email = $(this).val();
                if (email.length > 0 && isEmailNum(email)){
                    $("#emailTag").hide(300);
                } else {
                    $("#emailTag").show(300);
                }
            })


            if (userInfoObject.phoneNum != null) {
                //设置元素隐藏；
                $("#telNumTag").hide();
            }

            if (userInfoObject.email != null) {
                //设置元素隐藏；
                $("#emailTag").hide();
            }
            bindInnerByIdSeled("telNum",userInfoObject.phoneNum == null ? "" : userInfoObject.phoneNum);
            bindInnerByIdSeled("email",userInfoObject.email == null ? "" : userInfoObject.email);
            bindInnerByIdSeled("nickName",userInfoObject.nickName == null ? "" : userInfoObject.nickName);
            var sex = userInfoObject.sex;
            console.log(sex == "1");
            if (sex == "1"){
                $(".radioMan").attr('checked');
                // console.log("错误了！");
            }else {
                // console.log("正确了！");
                $(".radioWomanan").attr('checked');
            }
        }

        function bindInnerByIdSeled(id,innerText) {
            $("#"+id).val(innerText);
        }

        function initLayui(){
            //JavaScript代码区域
            layui.use('element', function () {
                var element = layui.element;

            });
            layui.use(['carousel', 'form'], function () {
                var carousel = layui.carousel
                    , form = layui.form;

                //常规轮播
                carousel.render({
                    elem: '#test1'
                    , width: '75%' //设置容器宽度
                    , height: '500px'
                    , arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });
        }
    </script>
</body>
</html>